<template>
  <div>
    <div class="operations">
  
    </div>
    <div class="card mb-3 mx-3">
      <form class="form-row p-3" autocomplete="off">
        <div class="form-group col-lg-3">
          <input name="code" placeholder="字典编码" class="form-control">
        </div>
        <div class="form-group col-lg-3">
          <input name="code" placeholder="字典编码" class="form-control">
        </div>
        <div class="form-group col-lg-3">
          <input name="code" placeholder="字典编码" class="form-control">
        </div>
        <div class="form-group col-lg-3">
          <input name="code" placeholder="字典编码" class="form-control">
        </div>
        <div class="form-group col-lg-3">
          <input name="code" placeholder="字典编码" class="form-control">
        </div>
        <div class="form-group col-lg-3">
          <input name="code" placeholder="字典编码" class="form-control">
        </div>
        <div class="form-group col-lg-3">
          <input name="description" placeholder="字典描述" class="form-control">
        </div>
        <div class="col">
          <button class="btn btn-outline-info"><i class="fa ti-search"></i> 搜索</button>
          <router-link class="btn btn-outline-info rad-30 float-right" to="/dict/new"><i class="fa fa-plus-square"></i>
            新增
          </router-link>
        </div>
      </form>
      <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            :formatter="formatter">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "tables",
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',

          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        loading : true
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>

<style scoped>

</style>